{% extends '__base__.html' %}

{% block title %} Hello,World {% endblock %}

{% block content %}
<button class="btn btn-primary" id="create-btn">新建日志</button>
<div id="content">
    {% if not page.page.items %}
    <h3>还没有日志！</h3>
    {% else %}
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>标题</th>
            <th>最后修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for blog in page.page.items %}
        <tr>
            <td><a href="/blog/detail/{{blog.id}}">{{blog.title}}</a></td>
            <td>{{blog.created_at|datetimeformat('%Y-%m-%d %H:%M')}}</td>
            <td>
                <a href="/blog/edit/{{blog.id}}" class="btn">修改</a>&nbsp;
                <a href="javascript:del_blog('/blog/del/{{blog.id}}');" class="btn">删除</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    {% endif %}
</div>
<ul class="pagination" style="float: right">
    {% if page.page.has_prev %}
    <li>
        <a href="/blog/manage?page={{page.page.page-1}}">上一页</a>
    </li>
    {% endif %}
    {% for pageNo in page.page.show_pages%}
    {% if pageNo == page.page.page%}
    <li>
        <a href="#" class="active">{{pageNo}}</a>
    </li>
    {% else %}
    <li>
        <a href="#">{{pageNo}}</a>
    </li>
    {% endif %}
    {% endfor %}
    {% if page.page.has_next %}
    <li>
        <a href="/blog/manage?page={{page.page.page+1}}">下一页</a>
    </li>
    {% endif %}
</ul>

<script>
    $(function () {
        $('#create-btn').on('click', function () {
            window.open('/blog/create', '新建文章');
        });

        var trueContent = $('#content').html().replace(/&lt;/g, '<').replace(/&gt;/g, '>');
        $('#content').html(trueContent);
        console.log(trueContent);

        $('body').append($('<link rel="stylesheet" href="/static/css/code_highlight_styles.css">'));
    });

    function del_blog(url) {
        console.log(url);
        if (confirm('确定删除这篇文章吗？')) {
            $.post(url, function (r) {
                r = $.parseJSON(r);
                if (r.status == 200) {
                    location.href='/blog/manage';
                }
                else {
                    alert(r.msg);
                }
            });
        }
    }
</script>
{% endblock %}
{% block menu %}menu-blog-manage{% endblock %}